<html>
<head>
	<script language="JavaScript" type="text/javascript">
		// Dojo configuration
		djConfig = {
			//debugAtAllCosts: true, //Don't normally need this in applications.
			isDebug: true,
			dojoIframeHistoryUrl: "../../iframe_history.html", //for xdomain
			preventBackButtonFix: false
		};
	</script>
	<script language="JavaScript" type="text/javascript" src="../../dojo.js"></script>
	<script language="JavaScript" type="text/javascript" src="browser/ApplicationState.js"></script>
	<script language="JavaScript" type="text/javascript">
		dojo.require("dojo.lang.common");
		dojo.require("dojo.undo.browser");
		dojo.require("dojo.io.*");
		//dojo.hostenv.writeIncludes(); //Don't normally need this in applications.
	
		//****************************************
		function goIoBind(id){
			doApplicationStateBind("browser/" + id + ".xml", "output", "dataOutput", id);
		}

		//****************************************
		/*
		This method illustrates using dojo.io.bind() that also saves an application
		state via dojo.undo.browser (dojo.io.bind() will automatically use dojo.undo.browser
		if the dojo.io.bind() request object contains a back for forward function).
		*/
		function doApplicationStateBind(url, outputDivId, backForwardOutputDivId, bookmarkValue){
			dojo.io.bind({
				//Standard dojo.io.bind parameter
				url: url,
		
				//Standard dojo.io.bind parameter.
				//For this test, all of the bind requests are for text/xml documents.
				mimetype: "text/xml",
				
				//Standard dojo.io.bind parameter: if this is a value that evaluates
				//to true, then the page URL will change (by adding a fragment identifier
				//to the URL)
				changeUrl: bookmarkValue,
		
				//Data for use once we have data for an ApplicationState object
				outputDivId: outputDivId,
				backForwardOutputDivId: backForwardOutputDivId,
				
				//A holder for the application state object.
				//It will be created once we have a response from the bind request.
				appState: null,
				
				//Standard dojo.io.bind parameter. The ioRequest object is returned
				//to the load function as the fourth parameter. The ioRequest object
				//is the object we are creating and passing to this dojo.io.bind() call.
				load: function(type, evaldObj, xhrObject, ioRequest){
					var stateData = "XHR: " + evaldObj.getElementsByTagName("data")[0].childNodes[0].nodeValue;
					ioRequest.appState = new ApplicationState(stateData, ioRequest.outputDivId, ioRequest.backForwardOutputDivId);
					ioRequest.appState.showStateData();
				},
		
				back: function(){
					this.appState.back();
				},
				
				forward: function(){
					this.appState.forward();
				}
			});
		}

		//****************************************
		dojo.addOnLoad(function(){
			//See if there is a bookmark hash on the page URL.
			var bookmarkId = location.hash;
			if(bookmarkId){
				bookmarkId = bookmarkId.substring(1, bookmarkId.length);
			}

			//If we have a bookmark, load that as the initial state.
			if(bookmarkId && bookmarkId.indexOf("xhr") == 0){
				//Load the XHR data for the bookmarked URL
				dojo.io.bind({
					url: "browser/" + bookmarkId + ".xml",
					mimetype: "text/xml",
					dataId: bookmarkId,
					load: function(type, evaldObj, http, kwArgs){
						var stateData = "(Initial State) XHR: " + evaldObj.getElementsByTagName("data")[0].childNodes[0].nodeValue;
						var appState = new ApplicationState(stateData, "output", "dataOutput");
						appState.showStateData();

						//Since this is the initial state, don't add it to the dojo.undo.browser
						//history stack (notice that this dojo.io.bind() request does not define
						//any back or forward functions). Instead, register the result of this bind
						//as the initial state for the page.
						dojo.undo.browser.setInitialState(appState);
					}
				});
			}else{
				var appState = new ApplicationState("This is the initial state (page first loaded, no dojo.io.bind() calls yet)", "output", "dataOutput");
				appState.showStateData();
				dojo.undo.browser.setInitialState(appState);
			}
		});
	</script>
</head>
<body>
	<div style="padding-bottom: 20px; width: 100%; border-bottom: 1px solid gray">
	<h3>dojo.undo.browser test (dojo.io.bind() with bookmarking)</h3>
	
	See the Dojo Book entry for 
	<a href="http://manual.dojotoolkit.org/WikiHome/DojoDotBook/DocFn1">Back Button and Bookmarking</a>.
		
	<p>This page tests the dojo.undo.browser back/forward integration with dojo.io.bind(),
	and dojo.undo.browser's bookmarking facility. For a back/forward test without bookmarking,
	see <a href="test_browser.html">test_browser.html</a>.</p>
	
	<p>The buttons that start with "XHR" use
	dojo.io.bind to do some XMLHTTPRequest calls for some test data, and they
	also define back/forward handlers, so dojo.io should use dojo.undo.browser
	add to history tracking.</p>

	<p>To test the bookmarking facility:</p>
	<ul>
		<li>Click on one of the buttons below.</li>
		<li>Save the resulting URL as a bookmark.</li>
		<li>Close the browser window, or navigate to a different page.</li>
		<li>Click on the bookmark to jump to that state in the page</li>
	</p>

	<p>Other notes:</p>
	
	<ul>
		<li>Don't test this page using local disk for MSIE. MSIE will not
		create a history list for iframe_history.html if served from a file:
		URL. The XML served back from the XHR tests will also not be properly
		created if served from local disk. Serve the test pages from a web
		server to test in that browser.</li>
		<li>Safari 2.0.3+ (and probably 1.3.2+): Only the back button works OK
		(not the forward button), and only if changeUrl is NOT used (so it <b>will not</b>
		work for this test page, since it is using bookmarking -- changeUrl). 
		When changeUrl is used, Safari jumps all the way
		back to whatever page was shown before the page that uses
		dojo.undo.browser support.</li>
		<li>Opera 8.5.3: Does not work.</li>
		<li>Konqueror: Unknown. The latest may have Safari's behavior.</li>
	</ul>
	</div>
	<div style="float:left; padding: 20px">
		<button onclick="goIoBind('xhr1')">XHR 1</button><br />
		<button onclick="goIoBind('xhr2')">XHR 2</button><br />
		<button onclick="goIoBind('xhr3')">XHR 3</button><br />
		<button onclick="goIoBind('xhr4')">XHR 4</button><br />	
	</div>
	<div style="float: left; padding: 20px">
		<b>Data Output:</b><br />
		<div id="output"></div>
		<hr />
		<i>Back/Forward Info:</i><br />
		<div id="dataOutput"></div>
	</div>
</body>
</html>
